<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/commonLayUI :: common_head_LayUi(~{::title},~{},~{})">
    <meta charset="UTF-8">
    <title>数据标准新增</title>
</head>
<body>
<div class="layui-container">
    <div style="font-size: 19px">数据质量标准管理-><span th:text="${dataInfo.getId()==null?'新增':'修改'}"></span></div>
    <div style="margin-top: 15px">
        <form class="layui-form" action="" method="post" th:object="${dataInfo}">
            <div class="layui-form-item" style="display: none">
                <div class="layui-btn">ID</div>
                <input class="layui-input" type="text" lay-verify="" id="id" name="id" th:value="*{id}"
                       placeholder="ID" autocomplete="off">
            </div>
            <div class="layui-form-item">
                <div class="layui-row">
                    <div class="layui-col-md1">
                        <label class=" layui-form-label" style="white-space:nowrap!important;"> 数据质量标准<span
                                style="color: red">*</span></label>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-input-inline">
                            <input class="layui-input" type="text" lay-verify="required" id="cnName" name="cnName"
                                   th:value="*{cnName}"
                                   placeholder="数据质量标准名称" autocomplete="off">
                        </div>
                    </div>
                    <div class="layui-col-md1">
                        <label class=" layui-form-label" style="white-space:nowrap!important;">英文名称</label>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-input-inline">
                            <input class="layui-input" type="text" lay-verify="" id="name" name="name"
                                   th:value="*{name}"
                                   placeholder="数据质量标准英文名称" autocomplete="off">
                        </div>
                    </div>
                    <div class="layui-col-md1">
                        <label class=" layui-form-label" style="white-space:nowrap!important;">数据质量类型</label>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-input-inline">
                            <select name="sjzllx" lay-verify="" th:field="*{sjzllx}">
                                <option value="数据模型标准">数据模型标准</option>
                                <option value="数据编码标准">数据编码标准</option>
                                <option value="主数据接口标准">主数据接口标准</option>
                                <option value="其他标准">其他标准</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-row">
                    <div class="layui-col-md1">
                        <label class=" layui-form-label" style="white-space:nowrap!important;">参考文献</label>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-input-inline">
                            <input class="layui-input" type="text" lay-verify="" id="ckwx" name="ckwx"
                                   th:value="*{ckwx}"
                                   placeholder="参考文献" autocomplete="off">
                        </div>
                    </div>
                    <div class="layui-col-md1">
                        <label class=" layui-form-label" style="white-space:nowrap!important;">标准分类<span
                                style="color: red">*</span></label>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-input-inline">
                            <select name="sjzlbzml" id="sjzlbzml" lay-verify="required" th:field="*{sjzlbzml}">
                                <option value="">请选择标准分类</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class=" layui-form-label" style="white-space:nowrap!important;">适用范围</label>
                <div class="layui-input-block">
                    <input class="layui-input" type="text" lay-verify="" id="syfw" name="syfw" th:value="*{syfw}"
                           placeholder="适用范围" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label class=" layui-form-label" style="white-space:nowrap!important;">附件</label>
                <div class="layui-input-block">
                    <button type="button" class="btn btn-success" id="fileUpload" th:if="${dataInfo.getId()==null}">
                        <i class="layui-icon">&#xe67c;</i>附件上传
                    </button>
                    <button type="button" class="btn btn-success" id="fileDownload" th:if="${dataInfo.getId()!=null}">
                        <i class="layui-icon layui-icon-link"></i>附件下载
                    </button>
                    <span id="outFileName"></span>
                    <input class="layui-input" type="text" id="fileId" name="fileId" th:value="*{fileId}"
                           placeholder="附件Id" autocomplete="off" style="display: none">
                </div>
            </div>
            <div class="layui-form-item">
                <button type="button" class="btn btn-success" id="layui-btn-open">关联规则</button>
                <table class="layui-table" id="ruleTable" lay-filter="ruleTable"></table>
            </div>
            <div class="layui-form-item" th:if="${dataInfo.getId()!=null &&  dataInfo.getFbzt()!='未发布'}">
                <label style="font-size: 17px" >审批记录</label>
                <table class="table table-hover">
                    <tr>
                        <th class="info">审批时间</th>
                        <th class="info">审批人</th>
                        <th class="info">审批操作</th>
                        <th class="info">审批意见</th>
                    </tr>
                    <tr th:each="approval:${approvalList}">
                        <th th:text="${approval.approvedTime}">审批时间</th>
                        <th th:text="${approval.approvedUser}">审批人</th>
                        <th th:text="${approval.approvedOperation}">审批操作</th>
                        <th th:text="${approval.approvedMsg}">审批意见</th>
                    </tr>
                </table>
            </div>
            <div class="layui-form-item" style="text-align: center;margin-top: 15px">
                <button type="button" class="btn btn-success btn-lg" lay-filter="backUrl" onclick="callBackList()">返回
                </button>
                <button type="button" class="btn btn-success btn-lg" lay-filter="submitForm" lay-submit
                        style="margin-left: 15px">确定
                </button>
            </div>
        </form>
    </div>
</div>
<script type="text/html" id="barDemoRuleTable">
    <a class="layui-btn layui-btn-xs" lay-event="edit">详情</a>
    <a class="layui-btn layui-btn-xs" lay-event="del">移除</a>
</script>
<script>
    layui.use(['table', 'form', 'layer', 'upload'], function () {
        // 渲染下拉框
        selectLoad();
        var form = layui.form;
        var table = layui.table;
        var layer = layui.layer;
        var upload = layui.upload;
        var uploadFileNames = '';
        var uploadFileIds = '';
        // 附件上传执行实例
        var uploadInst = upload.render({
            elem: '#fileUpload' //绑定元素
            , url: '/qa/insertFile' //上传接口
            , multiple: true
            , accept: 'file' // 接受所有类型文件
            , allDone: function (obj) { //当文件全部被提交后，才触发
                layer.msg("文件上传成功", {icon: 1, time: 1000})
                console.log(obj.successful); //请求成功的文件数
                console.log(obj.aborted); //请求失败的文件数

                document.getElementById("fileId").value = uploadFileIds;
                // 回显名称
                document.getElementById("outFileName").innerHTML = uploadFileNames;
            }
            , done: function (res) {
                //每个文件提交一次触发一次。“成功的回调”
                uploadFileNames += res.data.fileName + ",";

                uploadFileIds += res.data.id + ",";
            }, error: function (err) {
                //请求异常回调
                console.log(err)
            }
        });
        //监听提交
        form.on('submit(submitForm)', function (data) {
            let sendData = JSON.stringify(data.field);
            axios.post('/qa/biaozhun/biaozunAdd', sendData, {
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then(resp => {
                if (resp.data.code == 200) {
                    /*延迟回去*/
                    layer.msg(resp.data.msg, {icon: 1, time: 1000}, function () {
                        callBackList();
                    })
                }
            }).catch(error => {
                console.log(error)
            });
            return true;
        });
        // 渲染表格
        var ruleTable = table.render({
            elem: '#ruleTable',
            page: true,
            limits: [10, 15, 20],
            limit: 5,// 每页默认显示的数量
            url: '/qa/ruleManager/datagridLayUI?BZID=' + document.getElementById("id").value,
            cols: [
                [
                    {checkbox: true, fixed: 'left'},
                    {type: 'numbers', title: '序号', fixed: 'left'},
                    {field: 'createTime', title: '创建时间', width: 140},
                    {field: 'cnName', title: '规则名称', width: 130},
                    {field: 'ruleTemplateName', title: '规则模板', width: 130},
                    {field: 'datasourceName', title: '数据源', width: 80},
                    {field: 'dbName', title: '数据库名', width: 130},
                    {field: 'tableName', title: '数据表名', width: 130},
                    {field: 'tableFields', title: '数据字段', width: 140},
                    {field: 'sqlWhere', title: '过滤条件', width: 100}
                    , {fixed: 'right', width: 150, align: 'center', toolbar: '#barDemoRuleTable'} //这里的toolbar值是模板元素的选择器
                ]
            ],
            done: function (res, curr, count) {
                //非常重要！如果使table.reload()后依然使用过滤，就必须将过滤组件也reload()一下
            }
        });
        // 按钮操作
        table.on('tool(ruleTable)', function (obj) {
            let row = obj.data;
            if (obj.event == "edit") {
                // 查看详情
                layer.open({
                    type: 2,
                    title: '查看详情',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['80%', '90%'],
                    content: "/qa/ruleManager/detail?readOnly=true&id=" + row.id
                });
            }
            // 移除关联
            if(obj.event == "del"){
                let projectId =document.getElementById("id").value;
                axios.post('/qa/biaozhun/removeRelationShipRule?ruleId='+ row.id+"&projectId="+projectId, {}, {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(resp => {
                    if (resp.data.code == 200) {
                        layer.msg("移除成功", {icon: 1});
                        table.reload('ruleTable');
                    }
                }).catch(error => {
                    console.log(error)
                });
            }
        });
        // 点击弹出层
        $('#layui-btn-open').on('click', function () {
            let BZId = document.getElementById("id").value
            if (BZId == null) {
                layer.msg("请先点击保存按钮，保存标准", {icon: 2, time: 2000, shift: 6});
                return false;
            }
            layer.open({
                type: 2,
                title: '选择规则',
                id: 'layui-layer-rule',
                area: ['65%', '60%'],
                content: "/qa/ruleManager/choice?BZId=" + BZId,
                success: function (layero) {

                }
            });
        });

        // 点击弹出层
        $('#fileDownload').on('click', function () {
            layer.confirm('确定下载附件吗？', {
                    title: '附件下载',
                    icon: 3,
                    area: ['340px', '160px'], //弹框的大小
                    btn: ['确定', '取消'] //按钮
                }, function (index) {
                    let filedIds = document.getElementById("fileId").value;
                    let thatArray = filedIds.split(",");
                    thatArray.forEach((item, index) => {
                        if (item) {
                            window.open("/qa/downloadFile?fileId=" + item);
                        }
                    })
                    //点击“确定”执行的操作
                    layer.close(index);
                }, function () {
                    //点击“取消”执行的操作
                    layer.close();
                }
            )
        });
    });

    function selectLoad() {
        var self_id = $("#id").val();
        axios.post('/qa/biaozhun/getMuluSelect', {}, {
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(resp => {
            if (resp.data.code == 200) {
                for (var i = 0; i < resp.data.data.length; i++) {
                    $("#sjzlbzml").append("<option value=\"" + resp.data.data[i].id + "\">" + resp.data.data[i].title + "</option>");
                }
                // 回显
                if (self_id != null && self_id != '' && self_id != undefined) {
                    $("#sjzlbzml").val([[${dataInfo.sjzlbzml}]]);
                }
                layui.form.render("select");
            }
        }).catch(error => {
            console.log(error)
        });
        // 回显文件

    }

    function callBackList() {
        window.location.href = "/qa/biaozhun/list";
    }
</script>
</body>
</html>
